<template>
  <div class="detail-footer">
    <div class="detail-left">
      <div class="detail-dp">
        <i class="iconfont detial-size">&#xe601;</i>
        <span class="detail-dps">店铺</span>
      </div>
      <div class="detail-cancel">
        <i class="iconfont detial-size">&#xe644;</i>
        <span class="detail-dps">收藏</span>
      </div>
      <div class="detail-gwc">
        <i class="iconfont detial-size">&#xe601;</i>
        <span class="detail-dps">购物车</span>
      </div>
    </div>
    <div class="detail-right">
      <div class="detail-gr">
        <span class="detail-dps">加入购物车</span>
      </div>
      <router-link to='pay' tag="div" class="detail-order">
          <span class="detail-dps">提交订单</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
  .detail-footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.2rem;
    background: #F6F4F7;
    .detail-left{
      width: 45%;
      height: 100%;
      float: left;
      .detail-dp{
        width: 33%;
        height: 100%;
        float: left;
        border-right: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #858585;
        .detial-size{
          font-size: .42rem;
        }
        .detail-dps{
          margin-top: .05rem;
          font-size: .23rem;
        }
      }
      .detail-cancel{
        width: 33%;
        height: 100%;
        float: left;
        border-right: 1px solid #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #858585;
        .detial-size{
          font-size: .42rem;
        }
        .detail-dps{
          margin-top: .05rem;
          font-size: .23rem;
        }
      }
      .detail-gwc{
        width: 32.4%;
        height: 100%;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #858585;
        .detial-size{
          font-size: .42rem;
        }
        .detail-dps{
          margin-top: .05rem;
          font-size: .23rem;
        }
      }
    }
    .detail-right{
      width: 55%;
      height: 100%;
      float: left;
      display: flex;
      .detail-gr{
        flex: 1;
        height: 100%;
        line-height: 1.2rem;
        text-align: center;
        color: white;
        font-size: .36rem;
        background: #FF9800;
      }
      .detail-order{
        flex: 1;
        height: 100%;
        line-height: 1.2rem;
        text-align: center;
        color: white;
        font-size: .36rem;
        background: #E3211E;
      }
    }
  }
</style>
